<template>
  <el-container class="chat-page">
    <!-- xiugai--- -->
    <div class="scrollbar-container">
      <el-aside :style="{ width: scrollbarWidth + 'px' }" class="chat-list-box">
        <div class="chat-list-header">
          <el-input
            class="search-text"
            size="small"
            placeholder="搜索"
            v-model="searchText"
            style=""
          >
            <i class="el-icon-search el-input__icon" slot="prefix"> </i>
          </el-input>
        </div>
        <div
          class="chat-list-loading"
          v-if="loading"
          v-loading="true"
          :element-loading-text="$t('消息接收中...')"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#F9F9F9"
          element-loading-size="24"
        ></div>
        <el-scrollbar class="chat-list-items" v-else>
          <div v-for="(chat, index) in chatStore.chats" :key="index">
            <chat-item
              v-show="!chat.delete && chat.showName.includes(searchText)"
              :chat="chat"
              :index="index"
              @click.native="onActiveItem(index)"
              @delete="onDelItem(index)"
              @top="onTop(index)"
              :active="chat === chatStore.activeChat"
            ></chat-item>
          </div>
        </el-scrollbar>
        <div class="resizer" @mousedown.stop.prevent="onMouseDown"></div>
      </el-aside>
    </div>
    <el-container class="chat-box" style="">
      <div class="drag-box-null" v-if="!activeChat"></div>
      <dragBar v-if="!activeChat"></dragBar>
      <chat-box
        v-if="activeChat && activeChat.type != 'SYSTEM'"
        :chat="activeChat"
        :sendProduct="sendProduct"
        style=""
      ></chat-box>
      <chat-system-box
        v-if="activeChat && activeChat.type == 'SYSTEM'"
        :chat="activeChat"
        style=""
      ></chat-system-box>
    </el-container>
  </el-container>
</template>

<script>
import ChatItem from "../components/chat/ChatItem.vue";
import ChatBox from "../components/chat/ChatBox.vue";
import ChatSystemBox from "../components/chat/ChatSystemBox.vue";
import dragBar from "@/view/components/dragBar";

export default {
  name: "chat",
  components: {
    ChatItem,
    ChatBox,
    ChatSystemBox,
    dragBar,
  },
  data() {
    return {
      searchText: "",
      messageContent: "",
      group: {},
      groupMembers: [],
      sendProduct: false,
      isDragging: false,
    };
  },
  mounted() {
    const login = this.$route.query.login;
    const share = this.$route.query.share;
    console.log("🚀🚀🚀 ~ mounted ~ share:", share);
    if (share && share == "1") {
      this.sendProduct = true;
      this.$store.commit(
        "openShareChat",
        this.$store.state.configStore.shareUser
      );
      this.$store.commit("activeChat", 0);
    }
    if (login && login == 1) {
      this.$ipcRenderer.send("reset-window", 1400, 800, true); //检查更新
      this.$ipcRenderer.send("check-update");
    } else {
      this.$ipcRenderer.send("reset-window", 1400, 800);
    }
  },
  methods: {
    onMouseDown(event) {
      // event.stopPropagation();
      this.isDragging = true;
      const startX = event.clientX;
      const startWidth = this.scrollbarWidth;
      const doDrag = (e) => {
        if (this.isDragging) {
          let scrollWidth = startWidth + (e.clientX - startX);
          // this.scrollbarWidth = scrollWidth
          this.$store.commit("setWidthData", scrollWidth);
        }
      };
      const stopDrag = () => {
        this.isDragging = false;
        document.removeEventListener("mousemove", doDrag);
        document.removeEventListener("mouseup", stopDrag);
      };

      document.addEventListener("mousemove", doDrag);
      document.addEventListener("mouseup", stopDrag);
    },
    onActiveItem(index) {
      this.$store.commit("activeChat", index);
    },
    onDelItem(index) {
      this.$store.commit("removeChat", index);
    },
    onTop(chatIdx) {
      this.$store.commit("moveTop", chatIdx);
    },
  },
  computed: {
    chatStore() {
      return this.$store.state.chatStore;
    },
    activeChat() {
      return this.chatStore.activeChat;
    },
    loading() {
      return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg;
    },
    scrollbarWidth() {
      return this.$store.state.chatStore.scrollbarWidthData || 260;
    },
  },
};
</script>

<style lang="scss">
.scrollbar-container {
  display: flex;
  align-items: stretch;
}
.resizer {
  width: 10px; /* 可调整的宽度 */
  cursor: ew-resize;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: #eee;
  z-index: 999;
}
.chat-page {
  .chat-list-box {
    display: flex;
    flex-direction: column;
    background: var(--im-background);
    position: relative;
    min-width: 240px;
    max-width: 500px;
    .chat-list-header {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .chat-list-loading {
      height: 50px;
      background-color: #eee;

      .el-icon-loading {
        font-size: 24px;
        color: var(--im-text-color-light);
      }

      .el-loading-text {
        color: var(--im-text-color-light);
      }

      .chat-loading-box {
        height: 100%;
      }
    }

    .chat-list-items {
      flex: 1;
    }
  }
}
</style>
